<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡效果</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
</head>


<body>

<div id="tab" class="tab_box">

    <ul>
        <li class="hover"><span class="btn1"><span class="btn2">DIV+CSS 课程</span></span></li>
        <li class="link"><span class="btn1"><span class="btn2">JavaScript+JQuery 课程</span></span></li>
        <li class="link"><span class="btn1"><span class="btn2">联系leo课堂</span></span></li>
    </ul>

    <div class="box" id='box'>

        <div class="content" style="display: block;">
            <h2>DIV+CSS 课程可以让你：</h2>
            <p>&raquo; 精通 W3C 网页标准和 CSS2.0 规范下的页面制作；</p>
            <p>&raquo; 熟悉浏览器兼容性调试，包括但不限于 IE6，IE7，IE8，Firefox2.0；</p>
            <p>&raquo; 熟悉网站建设流程及 PhotoShop 精确切图；</p>
            <p>&raquo; 运用 DIV+CSS 技术熟练制作出网易、魔兽等门户级网站；</p>
            <p>&raquo; 掌握网页常见的码 JavaScript 效果；</p>
        </div>

        <div class="content">
            <h2>JavaScript+JQuery 课程可以让你：</h2>
            <p>&raquo; 轻松实现复杂的网页交互特效，不再辛苦的找寻、套用他人代码；</p>
            <p>&raquo; 熟悉 AJAX 运作机制，与后台默契配合程度达至天衣无缝；</p>
            <p>&raquo; 将页面内容以最佳用户体验方式呈现，真正站到用户角度进行前端开发；</p>
            <p>&raquo; 熟练使用 jquery 框架编写跨浏览器程序，提高工作效率；</p>
            <p>&raquo; 轻松应聘各大公司 <b>网站前端开发工程师</b> 职位</p>
        </div>

        <div class="content">
            <h2>联系方式：</h2>
            <p>&raquo; 联系人：leo</p>
            <p>&raquo; 我的手机：134后边随便</p>
            <p>&raquo; 我的QQ：123456789</p>
            <p>&raquo; 这是课程的网址：<a href="http://www.cleavly.com">http://www.clevaly.com</a></p>
        </div>

        <div class="adorn1"></div>
        <div class="adorn2"></div>

    </div>

</div>
<script type="text/javascript">
    
    var allLi = tab.children[0].getElementsByTagName('li');
    var allDiv = box.children;

    for(var i = 0;i < allLi.length;i++){
        allLi[i].setAttribute('索引值',i);
        allLi[i].onmouseover = function(){
            for(var i = 0;i < allLi.length;i++){
                allLi[i].className = 'link';
                allDiv[i].style.display= 'none';
            }
            this.className = 'hover';
            allDiv[this.getAttribute('索引值')].style.display = 'block';
        }
    }
</script>
</body>
</html>
